<template>
    <template v-for="item in asideMenuList" :key="item.path">
        <!-- 菜单项 -->
        <el-menu-item v-if="item.meta.showInAsideMenu && (!item.children || item.children.length === 0)" :index="item.path">
            <template v-if="item.meta.icon && item.meta.title">
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span class="first_level_title">{{ item.meta.title }}</span>
            </template>
        </el-menu-item>
        <!-- 子菜单 -->
        <el-sub-menu v-else-if="item.meta.showInAsideMenu && item.children && item.children.length > 1" :index="item.path">
            <template v-if="item.meta.icon && item.meta.title && item.meta.showInAsideMenu" #title>
                <el-icon>
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span class="first_level_title">{{ item.meta.title }}</span>
            </template>
            <!--递归组件-->
            <template v-if="item.children">
                <NavItem :asideMenuList="item.children"></NavItem>
            </template>
        </el-sub-menu>
        <!--只有一个子菜单的情况。TODO 还需要考虑其有子菜单的情况-->
        <el-menu-item v-if="item.meta.showInAsideMenu && item.children && item.children.length === 1" :index="item.path">
            <template v-if="item.children[0].meta.icon && item.children[0].meta.title">
                <el-icon>
                    <component :is="item.children[0].meta.icon"></component>
                </el-icon>
                <span class="first_level_title">{{ item.children[0].meta.title }}</span>
            </template>
        </el-menu-item>



    </template>
</template>


<script setup lang='ts' name='NavItem'>
    import type { MenuRouteInfo } from '@/types/type';
    defineProps<{ asideMenuList: Array<MenuRouteInfo> }>()

</script>

<style scoped lang='scss'>
    .first_level_title {
        font-size: 16px;
        font-weight: bold;
    }

    .second_level_title {
        font-size: 12px;
    }
</style>